<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-07-24 19:07:52
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-27 20:10:59
-->
<template>
  <div>
    <h2>选择您需要的Excel模板下载</h2>
    <div class="margin-t20">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <h3>基础版本</h3>
            </div>
            <p class="text-center">
              <i class="el-icon-document icon" />
            </p>
            <p>不包含多规格、多单位
              适用绝大多数行业</p>
            <el-button
              type="primary"
              plain
              class="wfull"
              @click="btnDownloadDefaultTemp"
            >点击下载</el-button>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <h3>多规格多单位</h3>
            </div>
            <div>
              <p class="text-center">
                <i class="el-icon-document-copy icon" />
              </p>
              <p>含3个规格、2个单位
                适用电脑行业、服装行业等</p>
              <el-button
                type="primary"
                plain
                class="wfull"
                @click="btnDownloadMultiTemp"
              >点击下载</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <h3>自定义模板</h3>
            </div>
            <el-button type="primary" @click="btnCustomTemp">我要自定义</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="自定义导入模板"
      :visible.sync="dialogVisible"
      destroy-on-close
      append-to-body
    >
      <div>
        我需要
        <el-select
          v-model="dataObj.specsQty"
          class="w100"
          clearable
          filterable
        >
          <el-option
            v-for="item in specsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        个规格
      </div>
      <div class="margin-t10">
        我需要
        <el-select
          v-model="dataObj.unitQty"
          class="w100"
          clearable
          filterable
        >
          <el-option
            v-for="item in unitOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        个单位
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnDownloadCustom">下载</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTemplate } from '@/api/goods/goods.js'
import { exportBlob } from '@/libs/util.js'

export default {
  data() {
    return {
      dialogVisible: false,
      specsOptions: [],
      unitOptions: [],
      dataObj: { specsQty: 1, unitQty: 1 }
    }
  },
  created() {
    const specsLen = 5
    const unitLen = 4
    const specsOptions = this.specsOptions
    const unitOptions = this.unitOptions
    for (let i = 0; i < specsLen; i++) {
      const val = i + 1
      specsOptions.push({ value: val, label: val })
    }
    for (let i = 0; i < unitLen; i++) {
      const val = i + 1
      unitOptions.push({ value: val, label: val })
    }
  },
  methods: {
    btnDownloadCustom() {
      const params = this.dataObj
      this.getTemplate(params)
    },
    btnDownloadDefaultTemp() {
      const params = {
        specsQty: 1,
        unitQty: 1
      }
      this.getTemplate(params)
    },
    btnDownloadMultiTemp() {
      const params = {
        specsQty: 3,
        unitQty: 2
      }
      this.getTemplate(params)
    },
    btnCustomTemp() {
      this.dialogVisible = true
    },
    getTemplate(params) {
      const loading = this.$loading({ fullscreen: true, text: '下载中' })
      getTemplate(params).then(res => {
        loading.close()
        let fileName = res.headers['content-disposition'].split('filename=')[1]
        fileName = decodeURI(fileName)
        const data = res.data
        exportBlob(data, fileName)
      }).catch(_ => {
        loading.close()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .icon{
        font-size: 60px; color: #e0e0e0;
    }
</style>
